<template>
	<view class="content">
		<view v-for="(item,index) in titleList" @click="gotoDetail(item)" style="display: flex; align-items: center;"  :class="'lock_state_'+item.lock_state">
			<view style="background-color: black; width: 10rpx; height: 10rpx; border-radius: 50px; margin-left: 40rpx;"></view>
			<!-- gui-margin-x gui-padding -->
			<view class="gui-ellipsis" style="width: 100%; border-bottom: 1px solid #fff; margin: 0 30rpx; padding: 30rpx 0; font-weight: bold;">
				{{item.title}}
			</view>
		</view>
		<view class="gui-text-center gui-text gui-color-gray" style="margin-top: 20rpx;">
			已经到底啦~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 20,
				type: 2,
				state: 0,
				total: 0,
				titleList: []
			}
		},
		onLoad() {
			this.titleList=[];
			this.getList()
		},
		methods: {
			getList() {
				let self = this
				let data = {
					page: self.page,
					pageSize: self.pageSize,
					type: self.type,
					state: self.state
				}
				uni.showLoading({
					title:"加载中..."
				})
				this.$boya.NGet("/app/my_notice", data, (res) => {
					console.log('公告rows: ', res.data)
					 self.titleList = res.data;
					uni.hideLoading()
					//self.titleList = [...self.titleList, ...res.data]
					//self.total = res.data.total
				}, err => {
					console.log('公告err: ', err);
				}, false, false)
			},
			gotoDetail(d) {
				console.log(d)
				uni.navigateTo({
					url: "/pages/home/notice/notice?id=" + d.id
				})
			},
			onReachBottom() {
				let self = this
				if (self.page * self.pageSize >= self.total) {
					uni.showToast({
						title: "没有数据了",
						icon: 'none',
						duration: 1000
					})
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (self.page <= self.page - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: "加载中"
						})
						self.page++
						this.getList()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(to bottom, #B8D5F7, #BFBDFF);
		padding-bottom: 40rpx;
		/* background: linear-gradient(to bottom, #86506148, #86a8e7); */
	}
	.lock_state_0{
		color: #333333;
	}
	.lock_state_1{
		color: #999999;
	}
</style>